<template>
	<!-- 首页标题栏，轮播图整合插件 -->
	<view class="banner-swiper-wrap u-m-b-10">
		<!-- <view class="navbar">
			<view class="navbar-fixed">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
					<view class="newhead">
						<view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view>
						<view class="sel-box u-flex-col" v-show="showSel">
							<view class="sel-item" v-for="(item,index) in cityList" :key="index"  @click="changePrice(item)">{{item.city}}</view>
						</view>
						 <view class="newhead_left" @click="getshowSel">
						 	<text class="newhead_text">{{cityName}}</text>
							<image src="../../../static/images/tabbar/tabbar_category1.png" mode="" class="newhead_xiala"></image>
						 </view>
						<sh-searchs style="" class="newheadsearch"></sh-searchs>
					</view>
				</view>
			</view>
			<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
		</view> -->
		<!-- <view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
			<view class="newhead">
				<view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view>
				<view class="sel-box u-flex-col" v-show="showSel">
					<view class="sel-item" v-for="(item,index) in cityList" :key="index"  @click="changePrice(item)">{{item.city}}</view>
				</view>
				 <view class="newhead_left" @click="getshowSel">
				 	<text class="newhead_text">{{cityName}}</text>
					<image src="../../../static/images/tabbar/tabbar_category1.png" mode="" class="newhead_xiala"></image>
				 </view>
				<sh-searchs style="" class="newheadsearch"></sh-searchs>
			</view>
		</view> -->
		<shopro-navbars
			backIconName=""
			:backTextStyle="{
				color: '#fff',
				fontSize: '40rpx',
				fontWeight: '500'
			}"
			
		>
		
		    <view slot="content" class="u-navbar u-navbar-fixed"  :style="[navbarStyle]">
		    	<view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view>
		    	<view class="sel-box u-flex-col" v-show="showSel">
		    		<view class="sel-item" v-for="(item,index) in cityList" :key="item.city" style='text-align: center;line-height:32px;'  @click="changePrice(item)">{{item.city}}</view>
		    	</view>
				<view  class="newhead" :style="[navbarInnerStyle]">
		    		 <view class="newhead_left" @click="getshowSel">
		    		 	<text class="newhead_text">{{cityName}}</text>
		    			<image src="../../../static/images/xiala.png" mode="" class="newhead_xiala"></image>
		    		 </view>
		    		<sh-searchs style="" class="newheadsearch"></sh-searchs>
		    	</view>
		    </view>
		</shopro-navbars>
		<!-- 标题栏 -->
		<!-- <view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
				<view class="u-back-wrap">
					<view class="u-icon-wrap u-back-text u-line-1" :style="[navTitleStyle]">{{ navTitle || '' }}</view>
				</view>
				<view hover-class="hover-search" class="search-box u-flex u-row-center u-col-center u-m-r-30" @tap="$Router.push('/pages/public/search')">
					<view class="u-iconfont uicon-search" style="color: #fff"></view>
				</view>
			</view>
		</view> -->
		<slot name="nav"></slot>
		<!-- 轮播组件 -->
		<swiper class="screen-swiper square-dot" @change="onChange" style="height: 520rpx;margin-top: 0px;background-color: #fff;" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item, index) in list" :key="index" @tap="onSwiper(index)"><image :src="item.image" mode="aspectFill" style="border-radius: 10px;"></image></swiper-item>
		</swiper>
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/**
 * home-head-轮播卡片,主要为了处理数据
 * @property {Array} list 轮播图数据，
 * @property {String} mode 指示器模式
 * @property {String} navTitle 项目名称
 */
import shSearchs from '../components/sh-searchs.vue';
export default {
	components: {
		shSearchs,
	},
	data() {
		return {
			navBgImage: '',
			changeNavBackground: false,
			swiperCur: 0,
			statusBarHeight: systemInfo.statusBarHeight,
			showSel:false,
			cityList:[],
			cityName:'郑州',//城市地址
			longitude:'',//经度
			latitude:'',//纬度
			navBackground:'#fff',
			
			statusBarHeight: 20,/* 状态栏高度 */
			navBarHeight: 45,/* 导航栏高度 */
			windowWidth: 375,/* 窗口宽度 */
			/* 设定状态栏默认高度 */
			val: ''/* 导航栏搜索框的值 */
		};
	},
	props: {
		isScorll: {
			type: Boolean,
			default: false
		},
		// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		navTitle: {
			type: String,
			default: 'Shopro商城'
		},
		navTitleStyle: {
			type: Object,
			default: () => {
				return {
					color: '#fff',
					fontSize: '38rpx'
				};
			}
		}
	},
	watch: {
		isScorll(newValue, oldValue) {
			this.changeNavBackground = newValue;
			this.navBgImage = this.list[this.swiperCur].image;
		}
	},
	computed: {
		// 导航栏内部盒子的样式
		navbarInnerStyle() {
			let style = {};
			style.height = this.navbarHeight + 'px';
			// #ifdef MP
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			style.marginRight = rightButtonWidth + 'px';
			// #endif
			return style;
		},
		// 整个导航栏的样式
		navbarStyle() {
			let style = {};
			style.zIndex = this.$u.zIndex.navbar;
			style.background = this.changeNavBackground ? `url(${this.navBgImage}) no-repeat top / 100% auto` : 'none';
			// console.log(this.systemInfo)
			style.marginTop = Number(this.statusBarHeight)+'px'
			Object.assign(style, this.background);
			return style;
		},
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return 44;
			// #endif
			// #ifdef MP
			return systemInfo.platform == 'ios' ? 44 : 48;
			// #endif
		}
		 	},
	created() {
		// 获取手机系统信息
		const info = uni.getSystemInfoSync()
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		this.statusBarHeight = info.statusBarHeight
		this.windowWidth = info.windowWidth
		// 除了h5 app mp-alipay的情况下执行
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		// 获取胶囊的位置
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		console.log(menuButtonInfo);
		// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
		this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
		this.windowWidth = menuButtonInfo.left
		// #endif
	
		this.navBgImage = this.list[0].image;
		this.getLocation()
		this.getdiList()//地址列表
	},
	methods: {
		getLocation(){
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode:true,
				altitude: true,
				success: function (res) {
					// console.log(res)
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.getaddress()
					
				},
				fail:function(err){
					console.log(err)
				}
			});
			
		},
		getaddress(){//根据经纬度查询城市
			this.$http('home.getaddress', {
				longitude:this.longitude,
				latitude:this.latitude,
			}).then(res => {
				if (res.code === 1) {
					this.cityName = res.data.city
					let item ={
						city:this.cityName,
						longitude:this.longitude,
						latitude:this.latitude,
						type:1
					}
					this.$emit('showsel',item)
				}
			});
		},
		getdiList(){
			//地址列表
			this.$http('home.city', {}).then(res => {
				if (res.code === 1) {
					this.cityList = res.data
				}
			});
		},
		onSwiper(e) {
			this.$tools.routerTo(this.list[e].path);
		},
		onChange(e) {
			this.swiperCur = e.detail.current;
		},
		hideModal() {
			this.showSel = false;
		},
		getshowSel(){
			this.showSel = true;
		},
		changePrice(item){
			console.log(item)
			this.showSel = false;
			item.type = 2
			this.cityName = item.city
			this.$emit('showsel',item)
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
// 轮播
.banner-swiper-wrap {
	// height: 520rpx;
	position: relative;
	z-index: 100;
	.search-box {
		width: 66rpx;
		height: 66rpx;
		background: rgba(#000, 0.18);
		border-radius: 100%;
	}
	.hover-search {
		background: rgba(#fff, 0.18);
	}
}

.u-navbar {
	width: 100%;
}

.u-navbar-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 991;
}

.u-status-bar {
	width: 100%;
}

.u-navbar-inner {
	@include vue-flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}

.u-back-wrap {
	@include vue-flex;
	align-items: center;
	flex: 1;
	flex-grow: 0;
	padding: 14rpx 14rpx 14rpx 24rpx;
}
.newhead{
	width: 100%;
	height: 44px;
	// background-color: rgba(237,0,25,1);
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 20px;
}
.newhead_xiala{
	width: 13px !important;
	height: 6px !important;
}
.newhead_left{
	display: flex;
	align-items:center;
}
.newhead_text{
	color: #333;
	font-size: 13px;
	line-height: 15px;
	white-space: nowrap;
	margin-right: 3px;
	font-weight: bold;
}
.newheadsearch{
	width: 65%;
	background: transparent;
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	width: 50%;
	// #endif
	margin-top: 5px;
}
.search .search-content{
	background-color: transparent;
	height: 30px;
}
.newhead_icon{
	width: 30px;
	height: 30px;
	margin-left: 10px;
}
.screen-swiper{
	padding: 10px 12px;
}
.sel-box {
	position: absolute;
	width: 750rpx;
	min-height: 200rpx;
	background: rgba(246, 246, 246, 1);
	border-radius: 0px 0px 20rpx 20rpx;
	z-index: 999;
	left: 50%;
	transform: translateX(-50%);
	bottom: -138rpx;
	top: 44px;
	transition: all ease-out 0.2s;
	.sel-item {
		color: #333;
		padding: 20rpx 40rpx 0;
		font-size: 24rpx;
		font-weight: 500;
	}
	.sel-active {
		color: #d5a65a;
		font-size: 26rpx;
		font-weight: 600;
	}
}
</style>
